<template>
    <div>
        <van-search v-model="value" shape="round" show-action placeholder="请输入搜索关键词" @input="HeadersInputer">
            <template #action>
                <div @click="onSearch">取消</div>
            </template>
        </van-search>
        <!-- 初始页面 -->
        <div class="Page1" v-if="flage == 'Page1'">
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 0 20px;">
                <h5 style="display: inline-block;">历史记录</h5>
                <van-icon name="delete-o" />
            </div>
            <!-- 历史记录点击跳转获取 -->
            <div style="display: flex; flex-wrap:wrap">
                <span class="spans" v-for="item in message.historyData" @click="History(item.keyword)">{{
                    item.keyword }}</span>
            </div>
            <h5 style="display: inline-block; margin-left: 20px;">热门搜索</h5>
            <div style="display: flex; flex-wrap:wrap">
                <span class="spans" v-for="item in message.hotKeywordList">{{
                    item.keyword }}</span>
            </div>
        </div>
        <!-- 收缩界面 -->
        <div class="Page2" v-else-if="flage == 'Page2'">
            <ul style="background-color: #fafafa;">
                <li v-for="item in rendering" class="lis" @click="OnClick(item)">{{ item.name }} <van-icon name="arrow"
                        style="float: right;" />
                </li>
            </ul>
        </div>
        <div class="Page3" v-else-if="flage == 'Page3'">
            <van-row type="flex">
                <van-col span="12">
                    <van-image width="10rem" height="10rem" fit="contain" :src="three.list_pic_url" />
                    <p>{{ three.name }}</p>
                    <span> ¥{{ three.retail_price }}</span>
                </van-col>
            </van-row>
        </div>

        <div class="Page4" v-else="flage=='Page4'">
            <van-row type="flex">
                <van-col span="12" v-for="item in three">
                    <van-image width="10rem" height="10rem" fit="contain" :src="item.list_pic_url" />
                    <p>{{ item.name }}</p>
                    <span> ¥{{ item.retail_price }}</span>
                </van-col>
            </van-row>
        </div>

    </div>
</template>

<script>
import { ClosingBox } from "@/api/Home/index";
import { output } from "@/api/Home/index";
export default {
    name: 'BusinessHomepage',

    data() {
        return {
            value: '',
            message: [],
            flage: 'Page1',
            rendering: [],

            //第三个页面渲染所需要的数据
            three: [],
        };
    },

    mounted() {

    },

    methods: {
        async Closing() {
            const { data: res } = await ClosingBox()
            this.message = res
            console.log(this.message);
        },
        onSearch() {
            this.$router.replace('/')
        },
        HeadersInputer() {
            if (this.value.trim() != "") {
                this.flage = 'Page2'
            } else {
                this.flage = 'Page1'
            }
            output(this.value, 'abc').then(res => {
                this.rendering = res.data.keywords
                console.log(this.rendering);
            })
        },
        OnClick(el) {
            this.three = el
            console.log(this.three);
            this.flage = 'Page3'
        },
        History(item) {
            output(encodeURIComponent(item), 'abc').then(res => {
                console.log(res.data);
                this.three = res.data.keywords
                console.log(this.three);
                this.flage = 'Page4'
            })
        }
    },
    created() {
        this.Closing();


    }
}
</script>

<style lang="less" scoped>
.spans {
    white-space: nowrap;
    padding: 10px;
    font-size: 14px;
}

.lis {
    font-size: 12px;
    padding: 10px 20px;
}
</style>